<template>
  <div class="statistics">
    <!-- 日期选择器 -->
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      style="margin-left: 10px; margin-bottom: 20px;">
    </el-date-picker>
    <!-- 搜索按钮 -->
    <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="getByDate">搜索</el-button>
    <!-- 导出按钮 -->
    <el-button type="primary" icon="el-icon-tickets" style="margin-left: 580px;" @click="exportOrder">导出</el-button>
    <!-- 表格 -->
    <el-table
    :summary-method="getSummaries"
    show-summary
    :data="orderList"
    style="width: 100%">
    <el-table-column label="订单编号" width="220" prop="orderId">
      </el-table-column>
    <el-table-column label="手机号" width="160" prop="phone">
    </el-table-column>
    <el-table-column label="车牌号" width="140" prop="carNum">
    </el-table-column>
    <el-table-column label="车位位置" width="160" prop="location">
    </el-table-column>
    <el-table-column label="缴费金额/元" width="140" prop="amount">
    </el-table-column>
    <el-table-column label="开始时间" width="170" prop="beginTime">
    </el-table-column>
    <el-table-column label="结束时间" width="160" prop="endTime">
    </el-table-column>
  </el-table>
   <!-- 分页 -->
   <Pagination v-show="t>0" :total="t" :page.sync="currentPage" :limit.sync="pageSize" @pagination="getData" />
  </div>
</template>

<script>
import Pagination from '@/components/Header/Pagination.vue'
import { mapState } from 'vuex'
import {getOrderByDate,getOrderList} from '@/api/index'
export default {
    name:'StatisticsIndex',
    components:{
      Pagination
    },
    data() {
      return {
        value:'',
        currentPage: 1,  // 当前页码-默认首页
        pageSize: 10,  // 每页显示的行数
        total:1,
      }
    },
    computed:{
      ...mapState(['orderList']),
      t:function(){
      return this.$store.state.t
     },
    },

    mounted(){
      //组件挂载完成时调用
      this.getData()
      this.getSummaries()
    },
    methods: {
       //API请求车位数据
      getData(){
        var data = {};
        data.currentPage = this.currentPage
        data.pageSize = this.pageSize
        this.$store.dispatch('getOrder',data)
      },

      //GMT时间转化为正常日期格式
      GMTToStr(time){
        let date = new Date(time)
        let Str=date.getFullYear() + '-' +
        (date.getMonth() + 1) + '-' + 
        date.getDate() + ' ' + 
        date.getHours() + ':' + 
        date.getMinutes() + ':' + 
        date.getSeconds()
        return Str
    },
      //根据日期查询订单信息
      getByDate(){
        const begin = this.GMTToStr(this.value[0])
        const end = this.GMTToStr(this.value[1])
        console.log(begin,end)
        getOrderByDate(begin,end).then((res)=>{
          if(res.success){
            //将最新的订单信息存入state
            this.$store.state.orderList = res.data
            this.$store.state.t = res.data.length
          }
        })
      },
      
      //合计的方法
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            return sums[index] = 'N/A';
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      },

      //导出订单列表的方法
      exportOrder(){
        const beginTime = this.GMTToStr(this.value[0])
        const endTime = this.GMTToStr(this.value[1])
        getOrderList(beginTime,endTime).then((res)=>{
          if(res.success){
            this.$message({
            message: '导出订单列表成功',
            type: 'success'
          });
          }
        })
      }
    }
  }
</script>

<style>
.statistics{
    margin-left: 230px;
    margin-top: 30px;
}
</style>